<template>
    <div class="col-md-8">
        <h3 class="reply">评论回复：</h3>
<!--        <h2 style='display: none'>暂无评论，点击左侧添加评论！！！</h2>-->
        <h2 v-show="comments.length === 0 ">暂无评论，点击左侧添加评论！！！</h2>
        <ul class="list-group">
            <Item v-for="(comment,index) in comments" :key="index" :comment="comment" :delComment="delComment" :index="index"></Item>
        </ul>
    </div>
</template>

<script>
    /**
     * list组件也需要数据,因为它要遍历展示.
     * 一个组件要接收父组件传过来的数据,必须要声明一个属性
     */
    import Item from './Item'
    export default {
        name: "List",
        //声明接收属性:这个属性就会成为组件对象(指的是当前这个List vue组件)的属性,那么模板里就可以使用它
        props:['comments','delComment'],  //这个只是指定属性名
        components:{ Item }
    }
</script>

<style scoped>
    .reply {
        margin-top: 0px;
    }
</style>